<template>
      
      <el-table 
      :data="tableData" 
      border
      style="width: 100%"
      >
        <slot ></slot>
    </el-table>
</template>
<script setup lang='ts'>
    import {onMounted, ref,watch} from "vue"
    const props=defineProps({
    request:{
        type:Function,
        default:async ()=>{}
    },
    reqParams:{
        type:Object,
        default:{}
    }
    })
    const tableData=ref<Obj[]>([])
    const doRequest=async (params?:Obj)=>{
        let res:ResData=await props.request(params) as ResData

        if(res.code==200){
            tableData.value=res.data as Obj[]
        }

    }
    // 监听参数变更 重新请求数据
    watch(props.reqParams,(data)=>{

    doRequest(data)
    
    })
    // 暴露请求的方法 便于父组件更新数据
    export interface TableInstance{
        doRequest:Function
    }
    defineExpose({
        doRequest
    })
    onMounted(()=>{
        doRequest(props.reqParams)
    })
</script>
<style scoped >
</style>
